<template>
    <el-dialog
            :title="title"
            :visible.sync="dialogFormVisible"
            width="500px"
            @close="close"
    >
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model.trim="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>

              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item label="协同部门" prop="deptList">
                  <el-select v-model="form.deptList" multiple placeholder="请选择" style="width: 100%;">
                    <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item label="描述">
                        <el-input v-model.trim="form.description" type="textarea" :rows="5"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="save" :loading="loading" :disabled="disabled">
                {{ loading ? '确定中 ...' : '确定' }}
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
    import { edit,getOne} from '@/api/group'
    import {getAllDept} from "@/api/dept";


    export default {
        name: 'lxEdit',
        data() {
            return {
                loading: false,
                disabled: false,
                deptDatas: [],
                form: {
                    id: '',
                    name: '',
                    description: '',
                    deptList: [],

                },

                rules: {
                    name: [{required: true, trigger: 'blur', message: '请输入名称'}],
                    deptList: [{ required: true, trigger: 'blur', message: '请选择部门' },],
                },
                title: '',
                dialogFormVisible: false,
                options: [],
            }
        },
        created() {
        },
        methods: {
          async fetchData() {
            const {data} = await getOne(this.form.id)
            console.log('data', data)
            this.form = data
            var list = data.sysGroups
            for (var i = 0; i < list.length; i++) {
              this.form.deptList.push(list[i].dept_id)
            }
          },
          showDia(row) {
            this.getDeptData();

            if (!row) {
              this.title = '添加'
            } else {
              this.title = '编辑'
              this.form.id = row;
              // this.form = Object.assign({}, row)
              this.fetchData()
            }
            this.dialogFormVisible = true
          },
          close() {
            this.$refs['form'].resetFields()
            this.form = this.$options.data().form
            this.dialogFormVisible = false
          },
          save() {
            console.log('deptList',this.form.deptList)
            if (this.loading) {
              return
            }
            this.$refs['form'].validate(async (valid) => {
              if (valid) {
                this.loading = true
                this.disabled = true
                this.timer = setTimeout(() => {
                  setTimeout(() => {
                    this.loading = false
                    this.disabled = false
                  }, 400)

                  edit(this.form).then((res) => {
                    if (res.code == 0) {
                      this.$baseMessage(res.msg, 'success')
                      this.$emit('fetch-data');
                      this.close()
                    } else {
                      this.$baseMessage('失败', 'error')
                    }
                  })
                }, 2000)
              } else {
                return false
              }
            })
          },

          //获取部门树
          getDeptData() {
            getAllDept().then((res) => {
              var list = res.data;
              this.options = [];
              for(var i = 0; i < list.length; i++) {
                var x = {};
                x.id = list[i].id;
                x.name = list[i].name;
                this.options.push(x);
              }

            })
          },

        },


    }
</script>
